<template>
	<view>
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<!-- 搜索条 -->
		<view class="nav">
			<view class="nav-left" @tap="goback">
				<u-icon name="arrow-left" size="18px" label="返回"></u-icon>
			</view>
			<view class="nav-center">
				请输入搜索
			</view>
			<view class="nav-right">
				<u-icon name="google-circle-fill" color="#e44a62" size="28"></u-icon>
			</view>

		</view>
		<!-- 搜素框 -->
		<view class="search">
			<view class="search-box">
				<u-search :clearabled="true" @input="searchInput" :placeholder="showKeyword" v-model:value="searchValue"
					:showAction="false" @search="send(getsearch[0].keyword)">
				</u-search>

			</view>

		</view>
		<!-- 模糊搜索推荐 -->
		<view class="vague" v-if="show" :style="{height:phoneheight}">
			<view class="vague-item" v-for="(item,index) in getsearch" :key="index" @click="send(item.keyword)">
				<u-icon name="search"></u-icon>
				<text>{{item.keyword}}</text>
			</view>
		</view>

		<!-- 标题和播放按钮 -->
		<view class="hot_search">
			<view class="hot_search-title">
				<text>热搜榜单</text>
			</view>
			<view class="hot_search-play">
				<view class="hot_search-play-icon">
					<img src="@/static/songs/bofang_icon.png">
				</view>
				<view class="hot_search-play-txt">
					<text>播放</text>
				</view>
			</view>
		</view>

		<!-- 热搜数据 -->
		<view class="search_list">
			<view class="search_list-info" v-for="(item,index) in hotlist" :key="index" @click="send(item.searchWord)"
				v-if="index<10">
				<text class="search_list-info-index">
					{{ index + 1}}
				</text>
				<text class="search_list-info-title">
					{{item.searchWord}}
				</text>
				<img :src="item.iconUrl" v-if="item.iconUrl">
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "@/utils/utils.js"

	import {
		getShowKeyword,
		getSuggest,
		getmylist,
		getHotSearch,
	} from '@/http/search.js'
	export default {
		data() {
			return {
				searchValue: "", // 搜索框的值,
				showKeyword: "", // 搜索框默认
				getsearch: [], //搜索关键字
				phoneheight: "", //手机高度
				show: false,
				currentTabIndex: 0, //标签卡下标值
				hotlist: [], //热搜数据

			}
		},
		async onLoad() {
			// 1.取数据 在onLoad生命周期中取  onLoad:页面的初始化 
			// 2.用async  await  来获取内容  因为返回的结果是个promise
			// 3. 最后把结果附给数组 让数组获取到取出的值
			// const ges = await uni.getStorage({
			// 	key: "neirong"
			// })
			// console.log(ges);
			// this.historyList = JSON.parse(ges[1].data)

			// 挂载的网络请求
			this._getShowKeyword()
			this._getHotSearch()
		},
		updated() {
			if (this.searchValue !== '') {
				this.show = true
			} else {
				this.show = false
			}
		},
		methods: {
			//搜索建议
			async _getShowKeyword() {
				const res = await getShowKeyword(this.searchValue);
				this.showKeyword = res.data.showKeyword
			},

			// 获取模糊搜索到的数据
			async _getSuggest() {
				if (this.searchValue !== '') {
					const res = await getSuggest(this.searchValue);
					this.getsearch = res.result.allMatch
					if (res.result.allMatch === undefined) {
						this.showToast()
					}
				}
			},

			// 获取热搜榜数据
			async _getHotSearch() {
				const {
					data: res
				} = await getHotSearch()
				this.hotlist = res
			},
			// 点击搜索获得的值
			async send(item) {
				console.log(item);
				//跳转到搜索结果界面
				uni.navigateTo({
					url: '/view/SearchList/SearchList?SearchList=' + item
				})
			},
			// 方法
			goback() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},

			// 防抖
			searchInput: utils.debounce(function(val) {
				this._getSuggest()
			}, 1000),

			//数据查询结果方法
			showToast() {
				this.$refs.uToast.show({
					title: '暂无数据',
					type: 'error',
				})
			},



		}

	}
</script>

<style lang="scss" scoped>
	* {
		font-family: STXihei;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.nav {
		color: #e44a62;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		margin: 0 14px;
		align-items: center;
		color: #090909;

		&-left {
			// width: 50px;
			// height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		&-right,
		&-center {
			font-size: 22rpx;
		}
	}


	// 模糊搜索
	.vague {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		z-index: 2;
		position: absolute;
		background-color: #fff;

		&-item {
			height: 100rpx;
			display: flex;
			align-items: center;

			text {
				margin-left: 10rpx;
				width: 100%
			}
		}
	}

	// 搜索框
	.search {
		padding: 0px 15px;

		&-box {
			border-radius: 50px;
			background: #efefef;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;

			&-input {
				width: 90%;
				align-items: center;
				text-align: center;
			}
		}
	}

	// 热搜标题和播放按钮
	.hot_search {
		margin: 15px 15px;
		display: flex;
		justify-content: space-between;

		&-title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			color: #353535;
		}

		&-play {
			width: 90px;
			// height: 15px;
			border: 1px solid #979797;
			border-radius: 50px;
			display: flex;
			justify-content: center;
			align-items: center;

			&-icon {
				padding-top: 3px;

				img {
					width: 15px;
					height: 15px;
				}
			}

			&-txt {
				font-size: 10px;
				padding-left: 8px;
			}
		}
	}

	// 热搜数据
	.search_list {
		border-top: 1px solid #f3f3f3;
		display: flex;
		flex-wrap: wrap;
		padding: 0 15px;

		&-info {
			width: 50%;
			display: flex;
			align-items: center;
			line-height: 45px;

			img {
				padding: 15px;
				width: 16px;
				height: 10px;
			}

			&-index {
				padding-right: 7px;
				color: #979797;
			}

			&-title {
				// width: 80px;
				// text-overflow: ellipsis;
				// white-space: nowrap;
				// overflow: hidden;
				font-size: 28rpx;
			}
		}
	}
</style>
